<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import tabdetailLogo1 from '../../assets/pc/tabdetail-logo1.png';
import tabdetailLogo2 from '../../assets/pc/tabdetail-logo2.png';
import tabdetailLogo3 from '../../assets/pc/tabdetail-logo3.png';
import tabdetailLogo4 from '../../assets/pc/tabdetail-logo4.png';

const props = defineProps({
  type: {
    type: String,
    default: '',
  },
  introduce: {
    type: Object,
    default: {},
  },
  index: {
    type: Number,
    default: 0,
  },
  bg: {
    type: String,
    default: '',
  }
});

const currentIndex = ref(-1) 

const mouseOver = (index)=>{
  currentIndex.value = index
}
const mouseLevel = (index)=>{
  currentIndex.value = -1
}

const goToDetail = (id) => {
  console.log('121221', props.type,props.introduce)
  router.push({ path: '/schooldDetailPc', query: { id, type:props.type } });
};
const count = ref(0);
</script>

<template>
  <div @mouseover="mouseOver(index)"  @mouseleave="mouseLevel" @click="goToDetail(props.introduce.id)" class="schoolProject" :class="{schoolProjectActive: currentIndex == index}" :style="{ 'background-image': `url(${props.bg})` }">
    <div v-if="props.index == 0" class="schoolProject-tip1"></div>
    <div v-if="props.index == 1" class="schoolProject-tip2"></div>
    <div v-if="props.index == 2" class="schoolProject-tip3"></div>
    <div class="xuhao">
      <img v-if="props.index == 0" :src="tabdetailLogo1"/>
      <img v-if="props.index == 1" :src="tabdetailLogo2"/>
      <img v-if="props.index == 2" :src="tabdetailLogo3"/>
      <img v-if="props.index != 0 && props.index != 1 && props.index != 2 " :src="tabdetailLogo4"/>
      <span v-if="props.index != 0 && props.index != 1 && props.index != 2 " class="xuhao-num">{{index+1}}</span>
    </div>
    <div class="schoolProject-logo">
      <img :src="props.introduce.coverimage" />
    </div>
    <div class="right">
    <div class="schoolProject-title"> {{ props.introduce.titile }}</div>
    <div class="schoolProject-subtitle">
      {{ props.introduce.subtitle }}
    </div>
   <div v-if="currentIndex == index" @click="goToZhiNeng" class="btn1">点击查看大学详情 > ></div>
   <div style="visibility:hidden;" v-if="currentIndex != index" @click="goToZhiNeng" class="btn1">点击查看大学详情 > ></div>
    </div>
  </div>
</template>

<style scoped lang="less">

.schoolProject {
  .btn1 {
    font-weight: bold;
    color: #034171;
    font-size: 18Px;
    margin-top: 30Px;
    text-align: right;
    padding-right: 30Px;
  }

  cursor: pointer;
  position: relative;
  background-size: 100%;
  width: 100%;
  height: 285Px;
  background: #FBFBFB;
  background-size: 100%;
  margin-bottom: 9Px;
  display: flex;
  align-items: center;
  .xuhao {
    position: relative;
    width: 128Px;
    margin: 0 36Px 0 26Px;
    .xuhao-num {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      color: #fff;
      font-size: 27Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }

  .schoolProject-tip1 {
    position: absolute;
    top: -2Px;
    width: 50Px;
    height: 30Px;
    right: 40Px;
    background-image: url('../../../assets/images/tabdetail-NO1.png');
    background-size: 100%;
  }

  .schoolProject-tip2 {
    position: absolute;
    top: -2Px;
    width: 50Px;
    height: 30Px;
    right: 40Px;
    background-image: url('../../../assets/images/tabdetail-NO2.png');
    background-size: 100%;
  }

  .schoolProject-tip3 {
    position: absolute;
    top: -2Px;
    width: 50Px;
    height: 30Px;
    right: 40Px;
    background-image: url('../../../assets/images/tabdetail-NO3.png');
    background-size: 100%;
  }

  .schoolProject-logo {
    background: #D8D8D8;
    box-shadow: 0Px 3Px 6Px 1Px rgba(164, 164, 164, 0.5);
    width: 208Px;
    height: 208Px;
    // margin-right: 75Px;
    img {
      width: 100%;
      height: 100%;

    }
  }
  .right {
    width: 725Px;
    margin-left: 75Px;
  }

  .schoolProject-title {
    display: inline-block;
    padding:0 59Px;
    height: 62Px;
    background: linear-gradient(180deg, #EEEEEE 0%, #CCCDFF 100%);
    font-size: 28Px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 62Px;
    margin-bottom: 30Px;
  }

  .schoolProject-subtitle {
   font-size: 21Px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 37Px;
  }
}
.schoolProjectActive {
  background: linear-gradient(170deg, #F8FDFF 0%, #C8E6FF 100%);
  background: #C8E6FF;
}
</style>
